<template>
	<view v-if="cartList.length > 0" class="cart-container">
		<!-- 收货地址区域 -->
		<my-address></my-address>
		
		<!-- 商品列表标题区域 -->
		<view class="cart-title">
			<!-- 左侧图标 -->
			<uni-icons type="shop" size="18"></uni-icons>
			<!-- 右侧文本 -->
			<div class="cart-title-text">购物车</div>
		</view>
		
		<!-- 商品列表区域 -->
		<uni-swipe-action>
			<block v-for="(goods,index) in cartList" :key="goods.goods_id">
				<uni-swipe-action-item
					@click="e => handleSwipeItem(e,goods.goods_id)"
					:right-options="options">
					<my-goods
						@handleNumber="changeNumber"
						@handleRadioSelect="changeRadioSelect"
						:isShowNum="true" :isShowRadio="true" :goods="goods"></my-goods>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		
		<!-- 结算区域 -->
		<my-settle></my-settle>
	</view>
	
	<!-- 空购物车区域 -->
	<view v-else class="empty-cart">
		<image src="/static/cart_empty@2x.png" class="empty-img"></image>
		<text class="tip-text">空空如也</text>
	</view>
</template>

<script>
	import { mapMutations,mapState,mapGetters } from 'vuex'
	import tabbarBadge from '@/mixins/tabbar-badge'
	export default {
		methods: {
			...mapMutations('cart',['deleteGoods','updateGoodsCount','updateGoodsSelectStatus']),
			handleSwipeItem(e,goodsId){					// 处理滑动项的处理函数
				if(e.content.text === '删除'){
					this.deleteGoods(goodsId)
				}
			},
			changeNumber(obj){					// obj => { goods_id,goods_count }
				this.updateGoodsCount(obj)
			},
			changeRadioSelect(obj){			// obj => { goods_id,goods_state }
				this.updateGoodsSelectStatus(obj)
			}
		},
		computed: {
			...mapState('cart',['cartList']),
			...mapGetters('cart',['totalGoodsCount'])
		},
		mixins: [tabbarBadge],
		data(){
			return {
				options: [
					{ text: '删除',style: { backgroundColor: '#C00000' } }
				]
			}
		}
	}
</script>

<style lang="scss">
/* 购物车区域 */
.cart-container {
	padding-bottom: 50px;
	
	.cart-title {
		height: 40px;
		display: flex;
		align-items: center;
		padding-left: 5px;
		border-bottom: 1px solid #efefef;
		
		.cart-title-text {
			font-size: 14px;
			margin-left: 10px;
		}
	}
}

/* 空购物车区域 */
.empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 150px;
	
	.empty-img {
		width: 90px;
		height: 90px;
	}
	
	.tip-text {
		font-size: 12px;
		color: gray;
		margin-top: 15px;
	}
}
</style>
